<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
		<script src="./14092016-mysql-2.11.1.js"></script>
		<script src="./14092016-mysql2-1.0.0-rc12.js"></script>
		<script src="./14092016-mysql2-1.0.0-rc13.js"></script>

		<script>
      let benchDataset = window.mysql1Data.filter(bench => bench.result).map( (bench) => {
				return {
					label: bench.opts.rate,
					fill: false,
					lineTension: 0.3,
					lineWidth: 0.1,
					pointBorderWidth: 0,
          pointRadius: 1,
					borderColor: "rgba(75,192,192,0.9)",
          borderWidth: 0.8,
					data: bench.result.histogram.map( (h) => { return { x: h.percentile, y: h.latency} } )
			  };
			});

			const benchDataset2 = window.mysql2masterData.filter(bench => bench.result).map( (bench) => {
				return {
					label: bench.opts.rate,
					fill: false,
					lineTension: 0.3,
					lineWidth: 0.1,
					pointBorderWidth: 0,
          pointRadius: 1,
					borderColor: "rgba(175,0,192,0.9)",
          borderWidth: 0.8,
					data: bench.result.histogram.map( (h) => { return { x: h.percentile, y: h.latency} } )
			  };
			});
			benchDataset = benchDataset.concat(benchDataset2);
			//benchDataset = benchDataset2;

			$(document).ready(function() {
        function toPlotlySurface3D(data) {
					return {
						z: data.filter(bench => bench.result).map( (bench) => {
							return bench.result.histogram.map( h => Math.min(h.latency, 30) );
							//return bench.result.histogram.map( h => Math.log(h.latency) )
						}),
						x: data.filter(bench => bench.result).map( (bench) => {
							return bench.result.histogram.map( h => h.percentile );
						}),
						y: data.filter(bench => bench.result).map( (bench) => {
							return bench.result.histogram.map( h => bench.opts.rate );
						}),
						type: 'surface',
						showscale: false, opacity:0.8
					};
				}

				const data_mysql = toPlotlySurface3D(window.mysql1Data);
				const data_mysql2 = toPlotlySurface3D(window.mysql2masterData);

				data_mysql2.opacity = 1;
				data_mysql2.showscale = true;
				Plotly.newPlot('myDiv',  [{x: data_mysql.x, y: data_mysql.y, z: data_mysql.z, type: 'surface',
				showscale: true, opacity: 1}]);
				Plotly.newPlot('myDiv1', [data_mysql2]);
				Plotly.newPlot('myDiv2', [data_mysql, data_mysql2]);
			});
			//style="display: flex; height: 100vh; margin: 0px; flex-direction: column"
		</script>
	</head>
	<body style="margin: 10px; padding-left: 30px">
		<h1>8 rows, 43 columns</h1>
		<h2>mysql</h2>
		<div id="myDiv" style="height:80vh;"></div>
		<h2>mysql2</h2>
		<div id="myDiv1" style="height:80vh;"></div>
		<h2>mysql + mysql2</h2>
		<div id="myDiv2" style="height:80vh;"></div>
	</body>
</html>
